<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 通用的工具栏 -- 其他页面也会使用这个组件，所以不要写当前文件夹里面，应该写通用组件文件 components里面 -->
      <page-tools>
        <!-- #left -->
        <template v-slot:left>
          当前页面数据有40条
        </template>
        <template #right>
          <!-- 插槽： 往子组件里面 传递 html结构 -->
          <!-- props是往子组件里面 传递数据 -->
          <div>
            <el-button v-permission="'export_excel'" type="success" size="mini" @click="exportExcel">导出excel</el-button>
            <el-button v-permission="'import_excel'" type="info" size="mini" @click="$router.push('/import')">导入excel</el-button>
            <el-button type="warning" size="mini" @click="addRolesBtn">新增员工</el-button>
          </div>
        </template>
      </page-tools>
      <!-- table表格 -->
      <el-table
        class="my-table"
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{prop: 'timeOfEntry', order: 'ascending'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="username"
          label="姓名"
          width="180"
        />
        <el-table-column
          property="workNumber"
          label="工号"
          width="180"
        />
        <el-table-column
          property="formOfEmployment"
          label="聘用形式"
          width="180"
        >
          <template slot-scope="scope">
            <div @click="fn(scope)">{{ transfromHireType(scope.row.formOfEmployment) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          property="staffPhoto"
          label="照片"
          width="180"
        >
          <template slot-scope="scope">
            <!-- 在我们写媒体的时候， 一般element-ui会提供一些组件 el-image -->
            <!-- 二次封装组件，是项目公用的组件，需要放components里面 -->
            <!-- <img :src="scope.row.staffPhoto" width="100"> -->
            <ImgPreview :src="scope.row.staffPhoto" />
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentName"
          label="部门"
          width="180"
        />
        <el-table-column
          prop="timeOfEntry"
          label="入职时间"
          sortable
          width="180"
        />
        <el-table-column label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="$router.push(`/employees/detail?id=${scope.row.id}`)"
            >查看</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="fenpeiRole(scope.row.id)"
            >分配角色</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delRoleBtn(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column></el-table>
      <!-- 分页插件 -->
      <el-pagination
        :current-page.sync="pageInfo.page"
        :page-size="pageInfo.size"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 新增的弹出框  v-if="dialogVisible" -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      @close="dialogClose"
    >
      <!-- 给当前子组件 加上ref， 然后通过 $refs 可以访问子组件所有的方法或者属性 -->
      <dialog-add ref="dialogRef" @close="dialogVisible = false" @success="dialogSuccess" />
    </el-dialog>
    <!-- 分配角色的弹窗 -->
    <el-dialog
      title="分配角色"
      :visible.sync="roleDialogVisble"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <AssignRole v-if="roleDialogVisble" :current-id="currentId" @close="roleDialogVisble = false" />
    </el-dialog>
  </div>
</template>

<script>
import { getUserListRequest, delEmployeeRequest } from '@/api/employees'
import globalConstant from '@/constant/employees'
import DialogAdd from './dialogAdd.vue'
import { transformEnToZhCN } from '@/utils'
import AssignRole from './AssignRole.vue'

// 第一种： 数组查找法
// function test(id) {
//   // 数组里面查找元素  find
//   const item = globalConstant.hireType.find(item => item.id === id)
//   if (item) {
//     return item.value
//   } else {
//     return '临时工'
//   }
// }
// // 第二种： 对象取值法 （核心就是将数组转换为对象）
// function test2(id) {
//   const obj = {}
//   globalConstant.hireType.forEach(item => {
//     // item = {id:1, value: '正式'}
//     obj[item.id] = item.value
//     // 不要使用 obj.1  只能obj.name  原因就是对象的key只能使用字符串 --- 新数据结构 Map
//     // obj.'1'
//     // obj.name  obj.'name'
//     // obj['1'] = '正式'
//     console.log(obj)
//   })

//   return obj[id] ? obj[id] : '临时工'
// }
// console.log(test2(1))

export default {
  components: { DialogAdd, AssignRole },
  data() {
    return {
      tableData: [],
      pageInfo: {
        page: 1,
        size: 20
      },
      total: 0,
      // 下面的变量作用是 控制弹出框显示隐藏
      dialogVisible: false,
      // 分配角色的弹框，显示隐藏属性
      roleDialogVisble: false,
      // 点击了分配角色以后，获取的当前用户的id
      currentId: ''
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    fn(aa) {
      console.log(aa)
    },
    async getUserList() {
      try {
        const res = await getUserListRequest(this.pageInfo)
        if (res.success) {
          this.total = res.data.total
          this.tableData = res.data.rows
        }
      } catch (error) {
        this.$message.error('获取员工列表失败')
      }
    },
    handleSizeChange() {},
    handleCurrentChange(value) {
      // 参数就是当前页码值
      console.log(value)
      // 在js里面 将数据page的值 手动赋值为 当前最新的页码值， 再发请求
      this.pageInfo.page = value
      this.getUserList()
    },
    transfromHireType(id) {
      // 数组里面查找元素  find
      // const item = globalConstant.hireType.find(item => item.id === id)
      // if (item) {
      //   return item.value
      // } else {
      //   return '临时工'
      // }

      const obj = {}
      globalConstant.hireType.forEach(item => {
        obj[item.id] = item.value
      })

      return obj[id] ? obj[id] : '临时工'
    },
    addRolesBtn() {
      this.dialogVisible = true
    },
    dialogSuccess() {
      this.dialogVisible = false
      this.getUserList()
    },
    dialogClose() {
      // 弹窗关闭以后， 1. 清空表单的校验  2. 数据初始化
      console.log('弹出框关闭以后', this.$refs.dialogRef)
      // $refs 可以访问子组件里面 所有的 属性和方法
      // 下面的代码，就是 父组件 调用子组件的方法，访问属性也可以
      this.$refs.dialogRef.reset()
    },
    async delEmployee(id) {
      try {
        const res = await delEmployeeRequest(id)
        if (res.success) {
          this.$message.success('删除角色成功')
          this.getUserList()
        } else {
          this.$message.error('删除角色失败')
        }
      } catch (err) {
        console.log('delEmployeeRequest: ', err)
      }
    },
    delRoleBtn(params) {
      console.log(params)
      // 晚上可以试试，将element-ui的 this.$confirm 换成async  await来写
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // this.delEmployee(params.row.id) // 这个函数只需要一个id，不需要scope，
        // scope作用域插槽，数据是一个大对象，我们用不上
        this.delEmployee(params)
        // 如果下面代码依赖与 上面代码的执行成功或者失败，那么上面的代码必须加await
        console.log(1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 导出excel的方法
    exportExcel() {
      // 使用之前需要先下载两个包 file-saver script-loader
      // 要么使用 npm install file-saver script-loader
      // 要么使用 yarn add file-saver script-loader  两种方式二选一
      // console.log(this.tableData) // 服务器返回的 原始数据
      // const res = transformEnToZhCN(this.tableData) // 被我们转换过后的 excel需要的新数据
      // console.log(res)
      import('@/vendor/Export2Excel').then(excel => {
        const { header, data } = transformEnToZhCN(this.tableData)
        excel.export_json_to_excel({
          // 表头
          // header: ['姓名', '年龄', '住址'],
          header,
          // data是表格的数据，是一个二维数组
          data,
          filename: '导出文件的名称',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },
    // 分配角色
    fenpeiRole(id) {
      // 函数的形参id，是属于函数的局部变量，只能在函数里面自己用
      // 外面用不了。，所有我们需要在data上面定义一个变量
      this.roleDialogVisble = true
      this.currentId = id
    }
  }
}
</script>

<style lang="scss" scoped>
.my-table {
  margin-top: 20px;
}
</style>
